<template>
  <div style="  height: 100%;
  width: 100%;">

    <div v-for="c in componentsArr" >
      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        {{c.n}}
      </van-divider>
      <component :is="c.c" class="p-10" :index="c.c"></component>
    </div>
  </div>

</template>

<script>
import LiveFun from "./liveFun.vue";
import Computed from "./computed.vue";
import WatchC from "./watch.vue";
import Reactive from "./reactive.vue";
import ReactiveToRefs from "./reactiveToRefs.vue";
import Ref from "./ref.vue";
import {
  reactive,
  toRefs
} from 'vue';
export default {
  name: "'index'",
  components:{
    LiveFun,
    Computed,
    WatchC,
    Reactive,
    ReactiveToRefs,
    Ref,
  },
  setup() {
    let obj = reactive({
      // name: "张三",
      componentsArr: [
        {n:"生命周期",c:"LiveFun"},
        {n:"Computed",c:"Computed"},
        {n:"Watch",c:"WatchC"},
        {n:"Reactive",c:"Reactive"},
        {n:"ReactiveToRefs",c:"ReactiveToRefs"},
        {n:"Ref",c:"Ref"},

      ]
    });

    return {
      ...toRefs(obj)
    }
  }
}
</script>
<style>
.p-10{
  padding: 10px;

}
</style>